<template>
  <div class="shop">
    <el-table v-if="fruits.length" :data="fruits" border style="width: 100%">
      <el-table-column prop="shop_img" label="图片">
         <template slot-scope="scope">
           <img  height="150" :src="'http://www.baseco.top/ljm/public/uploads/shop/'+scope.row.shop_img" alt="">
        </template>
      </el-table-column>
      <el-table-column prop="shop_title" label="商品"></el-table-column>
      <el-table-column prop="shop_price" label="价格"></el-table-column>
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button @click="del(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div
      v-else
      style="font-size: 25px;text-align: center; margin-top: 300px;height: 100px;"
    >购物车空空如也，请先去购买商品~</div>
    <!--结算按钮-->
    <div style="overflow:hidden" v-show="fruits.length >0">
      <div class="btn" @click="centerDialogVisible = true">结算商品</div>
    </div>
    <el-dialog title="选择支付" :visible.sync="centerDialogVisible" width="30%" center>
      <div class="pay_box">
        <img src="@/assets/wx.png" alt srcset>
        <img src="@/assets/zfb.jpg" alt srcset>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="centerDialogVisible = false">已支付</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { ljmAjax, POST } from "@/api/index";
export default {
  data() {
    return {
      fruits: [],
      isCheckedAll: false,
      fruitIds: [],
      price: 0,
      centerDialogVisible: false
    };
  },

  created() {
    this.init();
  },
  methods: {
    init() {
      const shop_buyer = this.$store.state.loginData.id || 0;
      const params = {
        shop_buyer: shop_buyer
      };
      POST("api/index/getShopCar", params).then(res => {
        this.fruits = res.data.data;
        console.log(res.data.data);
      });
    },
    del(item) {
      // this.fruits.splice(index,1);
      const params = {
        id: item.id,
        buyer_id: item.shop_buyer
      };
      POST("api/index/delCar", params).then(res => {
        // this.fruits = res.data.data;
        console.log(res.data);
        this.init();
      });
    },
    checkedOne(detailId) {
      let idIndex = this.fruitIds.indexOf(detailId);
      if (idIndex >= 0) {
        // 如果已经包含了该id, 则去除(单选按钮由选中变为非选中状态)
        this.fruitIds.splice(idIndex, 1);
      } else {
        // 选中该checkbox
        this.fruitIds.push(detailId);
      }
    },
    checkedAll() {
      this.isCheckedAll = !this.isCheckedAll;
      if (this.isCheckedAll) {
        // 全选时
        this.fruitIds = [];
        this.fruits.forEach(function(fruit) {
          this.fruitIds.push(fruit.detailId);
        }, this);
      } else {
        this.fruitIds = [];
      }
    }
  }
};
</script>
<style scoped>
.pay_box {
  text-align: center;
}
.pay_box img {
  width: 200px;
}
.balance {
  position: fixed;
  z-index: 100;
  width: 400px;
  height: 400px;
  top: 200px;
  left: calc(50% - 200px);
}
.btn {
  width: 100px;
  text-align: center;
  float: right;
  margin: 40px 0;
}
.shop {
  width: 1200px;
  min-height: 400px;
  margin: 30px auto;
  position: relative;
}
.shop .table {
  width: 100%;
  text-align: left;
}
.table td {
  line-height: 40px;
  padding-left: 20px;
}
.table th {
  line-height: 50px;
  padding-left: 20px;
  background: #efefef;
}
#label_btn {
  position: absolute;
  bottom: 0px;
  right: 100px;
}
.textCenter {
  text-align: center;
}
</style>

